<template>
  <div id="collegeImgs" class="main">
    <div
      v-for="(img, index) in collegeImgs"
      :key="img.url"
      class="college-imgs-box curr"
    >
      <el-image
        @click="handlePriveImg(index)"
        class="imgs-box"
        style="width: 216px; height: 120px; margin: 20px 30px 0 0"
        :src="img.url"
        :zoom-rate="1.2"
        :max-scale="7"
        :min-scale="0.2"
        :preview-src-list="previewImgs"
        fit="cover"
        :initial-index="priveImgIndex"
      >
        <template #error>
          <div class="image-slot">
            <el-icon><icon-picture /></el-icon>
          </div>
        </template>
      </el-image>
      <div style="text-align: center" class="f14">{{ img.description }}</div>
    </div>

    <!-- :initial-index="4" -->
  </div>
  <div
    v-if="!collegeImgs.length"
    style="text-align: center; color: #909399e0; margin-top: 50px"
    class="f14"
  >
    暂无数据
  </div>
</template>

<script setup>
import { Picture as IconPicture } from '@element-plus/icons-vue';
import { getSchoolImgs } from '@/api/collegeDetails/collegeDetails';
import { ref } from 'vue';
import { useRoute } from 'vue-router';
const route = useRoute();
const previewImgs = ref([]);
const collegeImgs = ref([]);
const reqData = ref({
  code: route.query.collegecode || '',
});
const priveImgIndex = ref(0);
const fetchSchoolImgs = () => {
  getSchoolImgs(reqData.value).then((res) => {
    if (res.data.code == 20000) {
      collegeImgs.value = res.data.data;
      previewImgs.value = res.data.data.map((item) => item.url);
    }
  });
};
const handlePriveImg = (index) => {
  priveImgIndex.value = index;
};
fetchSchoolImgs();
</script>

<style lang="scss" scoped>
.college-imgs-box:nth-child(5n) .imgs-box {
  margin-right: 0px !important;
}
.college-imgs-box:hover {
  color: var(--color-text);
}
.imgs-box {
  border-radius: 5px;
}
#collegeImgs {
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 150px;
}
.demo-image__error .image-slot {
  font-size: 30px;
}
.demo-image__error .image-slot .el-icon {
  font-size: 30px;
}
.demo-image__error .el-image {
  width: 100%;
  height: 200px;
}
.image-text {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: rgba(0, 0, 0, 0.5);
  color: white;
  padding: 5px;
  text-align: center;
  font-size: 12px;
}
</style>
